<template>
  <div class="websocket-config-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>WebSocket 配置</span>
          <div>
            <el-button @click="handleRefreshCache" :loading="refreshing">刷新配置缓存</el-button>
            <el-button type="primary" @click="handleSave" :loading="saving">保存配置</el-button>
          </div>
        </div>
      </template>

      <el-alert
        v-if="!form.enabled"
        title="WebSocket 功能已禁用"
        type="warning"
        :closable="false"
        show-icon
        style="margin-bottom: 20px"
      >
        <template #default>
          <p>当前 WebSocket 功能已禁用，所有 WebSocket 相关操作将不会执行。</p>
          <p>启用后，系统将支持实时消息推送、在线聊天等功能。</p>
        </template>
      </el-alert>

      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="180px"
        class="websocket-form"
      >
        <el-form-item label="启用 WebSocket" prop="enabled">
          <el-switch
            v-model="form.enabled"
            active-text="启用"
            inactive-text="禁用"
          />
          <div class="form-tip">
            启用后，系统将支持实时消息推送、在线聊天等功能。禁用后，所有 WebSocket 相关操作将不会执行。
          </div>
        </el-form-item>

        <el-divider v-if="form.enabled" />

        <template v-if="form.enabled">
          <el-form-item label="HTTP API 地址" prop="base_url">
            <el-input
              v-model="form.base_url"
              placeholder="例如：http://localhost:8080"
            />
            <div class="form-tip">
              WebSocket 服务器的 HTTP API 地址，用于 Laravel 后端调用 WebSocket 服务的 API 接口
              <br />
              <strong>示例：</strong> http://localhost:8080 或 https://websocket.example.com
            </div>
          </el-form-item>

          <el-form-item label="WebSocket 连接地址" prop="ws_url">
            <el-input
              v-model="form.ws_url"
              placeholder="例如：ws://localhost:8080"
            />
            <div class="form-tip">
              WebSocket 服务器的 WebSocket 连接地址，用于前端建立 WebSocket 连接
              <br />
              <strong>开发环境：</strong> ws://localhost:8080
              <br />
              <strong>生产环境：</strong> wss://websocket.example.com（建议使用 SSL）
            </div>
          </el-form-item>

          <el-form-item label="请求超时时间" prop="timeout">
            <el-input-number
              v-model="form.timeout"
              :min="1"
              :max="300"
              :step="1"
              controls-position="right"
            />
            <span style="margin-left: 10px">秒</span>
            <div class="form-tip">
              WebSocket 服务请求超时时间，建议设置为 5-10 秒
            </div>
          </el-form-item>
        </template>

        <el-form-item>
          <el-button type="primary" @click="handleSave" :loading="saving">保存配置</el-button>
          <el-button @click="handleRefreshCache" :loading="refreshing">刷新配置缓存</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button @click="handleLoad">重新加载</el-button>
        </el-form-item>
      </el-form>

      <!-- 配置说明 -->
      <el-card shadow="never" style="margin-top: 20px">
        <template #header>
          <span>配置说明</span>
        </template>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="启用 WebSocket">
            控制是否启用 WebSocket 功能。禁用后，所有 WebSocket 相关操作将不会执行。
          </el-descriptions-item>
          <el-descriptions-item label="HTTP API 地址">
            WebSocket 服务器的 HTTP API 地址，用于 Laravel 后端调用 WebSocket 服务的 API 接口。
            例如：http://localhost:8080
          </el-descriptions-item>
          <el-descriptions-item label="WebSocket 连接地址">
            WebSocket 服务器的 WebSocket 连接地址，用于前端建立 WebSocket 连接。
            开发环境使用 ws://，生产环境建议使用 wss://（WebSocket Secure）。
          </el-descriptions-item>
          <el-descriptions-item label="请求超时时间">
            WebSocket 服务请求超时时间（秒），建议设置为 5-10 秒。
          </el-descriptions-item>
          <el-descriptions-item label="注意事项">
            <ul style="margin: 0; padding-left: 20px">
              <li>修改配置后，需要点击"刷新配置缓存"按钮才能使配置生效</li>
              <li>确保 WebSocket 服务已启动并运行正常</li>
              <li>确保 JWT_SECRET 与 Laravel 后端一致</li>
              <li>确保 Redis 连接正常，用于验证 Token</li>
              <li>生产环境建议使用 WSS (WebSocket Secure) 和 HTTPS</li>
            </ul>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'

const formRef = ref(null)
const saving = ref(false)
const refreshing = ref(false)

const form = reactive({
  enabled: false,
  base_url: 'http://localhost:8080',
  ws_url: 'ws://localhost:8080',
  timeout: 5,
})

const rules = {
  base_url: [
    { required: true, message: '请输入 HTTP API 地址', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入 HTTP API 地址'))
        } else if (!/^https?:\/\/.+/.test(value)) {
          callback(new Error('HTTP API 地址必须以 http:// 或 https:// 开头'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  ws_url: [
    { required: true, message: '请输入 WebSocket 连接地址', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入 WebSocket 连接地址'))
        } else if (!value.startsWith('ws://') && !value.startsWith('wss://')) {
          callback(new Error('WebSocket 地址必须以 ws:// 或 wss:// 开头'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  timeout: [
    { required: true, message: '请输入超时时间', trigger: 'blur' },
    { type: 'number', min: 1, max: 300, message: '超时时间必须在 1-300 秒之间', trigger: 'blur' },
  ],
}

// 加载配置
const loadConfig = async () => {
  try {
    const res = await request.get('/websocket-config')
    if (res.code === 200 && res.data) {
      Object.assign(form, {
        enabled: res.data.enabled || false,
        base_url: res.data.base_url || 'http://localhost:8080',
        ws_url: res.data.ws_url || 'ws://localhost:8080',
        timeout: res.data.timeout || 5,
      })
    }
  } catch (error) {
    console.error('加载配置失败:', error)
    ElMessage.error('加载配置失败')
  }
}

// 保存配置
const handleSave = async () => {
  try {
    // 如果启用了 WebSocket，需要验证相关字段
    if (form.enabled) {
      await formRef.value.validate()
    }
    
    saving.value = true
    
    const res = await request.put('/websocket-config', {
      enabled: form.enabled,
      base_url: form.enabled ? form.base_url : undefined,
      ws_url: form.enabled ? form.ws_url : undefined,
      timeout: form.enabled ? form.timeout : undefined,
    })
    
    if (res.code === 200) {
      ElMessage.success('配置保存成功')
      // 自动刷新配置缓存
      await handleRefreshCache()
    }
  } catch (error) {
    if (error.errors) {
      ElMessage.error('验证失败，请检查输入')
    } else {
      ElMessage.error(error.message || '保存失败')
    }
  } finally {
    saving.value = false
  }
}

// 刷新配置缓存
const handleRefreshCache = async () => {
  try {
    refreshing.value = true
    
    const res = await request.post('/websocket-config/refresh')
    
    if (res.code === 200) {
      ElMessage.success('配置缓存已刷新，新配置已生效')
      // 重新加载配置
      await loadConfig()
    } else {
      ElMessage.error(res.message || '刷新配置缓存失败')
    }
  } catch (error) {
    ElMessage.error(error.message || '刷新配置缓存失败')
  } finally {
    refreshing.value = false
  }
}

// 重置配置
const handleReset = async () => {
  try {
    await ElMessageBox.confirm('确定要重置配置吗？重置后将恢复为默认配置', '提示', {
      type: 'warning',
    })
    
    Object.assign(form, {
      enabled: false,
      base_url: 'http://localhost:8080',
      ws_url: 'ws://localhost:8080',
      timeout: 5,
    })
    
    ElMessage.success('已重置为默认配置')
  } catch (error) {
    // 用户取消
  }
}

// 重新加载配置
const handleLoad = async () => {
  await loadConfig()
  ElMessage.success('配置已重新加载')
}

onMounted(() => {
  loadConfig()
})
</script>

<style scoped lang="scss">
.websocket-config-container {
  // padding 由 app-container 统一管理
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.websocket-form {
  max-width: 900px;
  margin: 0 auto;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  line-height: 1.6;
}

.el-divider {
  margin: 20px 0;
}

:deep(.el-descriptions__label) {
  width: 150px;
  font-weight: 500;
}
</style>

